﻿<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DataListMenu3.aspx.vb" Inherits="ProjetoDeTestes.DataListMenu3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>    
<%--    <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.5.min.js" type="text/javascript"></script>
    <script src="jQuery/accordion2.js" type="text/javascript"></script>
    <script type="text/javascript">
        jQuery().ready(function () {
            $('.theMenu').Accordion({
               /*active: 'h3.selected',*/
                header: 'h3.head',
                alwaysOpen: true,
                animated: true,
                showSpeed: 200,
                hideSpeed: 400
            });
        });	
    </script>--%>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-u i.css" rel="stylesheet" type="text/css"/>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <script type="text/javascript">
      $(document).ready(function () {
          $(".theMenu").accordion({ autoHeight: false });

          $("#click").click(function () {
              var div = $("#hideMenu");
              div.animate({ "left": parseInt(div.css('left')) == 0 ? "-=250px" : "0px" }, "fast");
          });
      });



  </script>
        <style type="text/css">
*{margin:0;padding:0;} * html ul ul li{margin-bottom:-1px;} 

        a{text-decoration:none}
        .theMenu li{width:250px;border:0px solid #000;list-style-type:none;text-align:left} 

        h3.head a{display:block; font-size:16px; color:#eee; border:1px solid #ddd ;background:#A54A49 url('bgMenuItemPe rfil.png') repeat-x; padding:8px 2px 8px 10px} 
        h3.head a:hover{color:#000;background:#eee url('bgMenuItemTipoForm') repeat-x;} 
        h3.selected a{background:#A54A49;color:#fff;padding:8px 2px 8px 10px;border:0px solid #777;} 
        h3.selected a:hover{color:#A54A49;} 
        
        h4.head a{font-size:16px;color:#555;border-top:1px solid #A54A49;border-right:1px solid #eee;background:#A54A49;border-left:9px solid #A54A49;padding:3px 2px 3px 5px;} 
        h4.head a:hover{font-size:16px;color:#000;background:#eee url('bgMenuItemTipoForm') repeat-x;padding:3px 2px 3px 8px;} 
        h4.selected a{background:#000; padding:3px 2px 3px 8px;} 
        h4.selected a:hover{background:#A54A49;color:#fbfbfb;padding:3px 2px 3px 8px;}
       
        * html ul ul li a,* html ul li a{height:100%;} 
        ul ul li a,ul ul ul li a{background:#eee;display:block;color:#333;font-size:14px;padding:5px 2px 5px 15px;border-left:9px solid #A54A49;border-top:1px solid #A54A49;} 
        ul ul li a:hover,ul ul ul li a:hover{background:#A54A49;;display:block;color:#fbfbfb;font-size:14px;padding:5px 2px 5px 15px;}
        ul ul ul li.selected{background:#A54A49;display:block;color:#fbfbfb;font-size:14px;padding:5px 2px 5px 15px;}   

        #divMenu{border:1px solid #eee;width:249px}
        #hideMenu{position:absolute;left:0; top:0;border:0px solid #000;width:325px}
        #click{float:right;background:#efefef;border:1px solid #A54A49;padding:5px;color:#555}
        #click:hover{float:right;background:#fdedef;border:1px solid #AD7D4D;padding:5px;color:#000}



    </style>
</head>
<body>
    
    <form id="form1" runat="server">
     <div>
        <asp:Button runat="server" Text="enche o Menu" Width="100%" ID="uia" /><br />
    </div>
    <div id="hideMenu" runat="server" clientidmode="Static"><a id="click" href="#">>> MENU</a><div id="divMenu" runat="server"></div></div>
    <br /><br /><br />
    
    </form>
</body>
</html>
